<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>新用户注册</title>
  <style></style>
</head>

<body>
  <h1>新用户注册</h1>
  <hr>
  <a href="./modify.html">用户个人信息页面</a>
  <input type="text" placeholder="用户的名字" id="username">
  <input type="text" placeholder="手机号" id="userphone">
  <!-- 以下的单词特别容易错！！member mem!!! -->
  <input type="text" placeholder="会员1，非会员0" id="usermember">
  <button id="btn">注册</button>
  <script>
    //1.获取元素
    var username = document.getElementById('username');
    var userphone = document.getElementById('userphone');
    var usermember = document.getElementById('usermember');
    var btn = document.getElementById('btn');

    //2.点击事件触发ajax
    btn.onclick = function () {
      var unameval = username.value.trim();
      var uphoneval = userphone.value.trim();
      var umemberval = usermember.value.trim();
      if (unameval && uphoneval && umemberval) {
        //调用ajax函数
        ajax(unameval, uphoneval, umemberval);
      }else{alert('输入内容不能为空')}

    }
    //3.ajax函数
    function ajax(n, p, m) {
      var xhr = new XMLHttpRequest();
      xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
          if (xhr.status >= 200 && xhr.status < 300) {
            console.log(xhr.responseText);
            var result = JSON.parse(xhr.responseText);
            if(result.code==1){
              alert(result.msg)
              //给所有输入框的value重新赋值为空字符串的方法情况原来用户输入的数据
              username.value='';
              userphone.value='';
              usermember.value='';
            }
          }
        }
      }
      xhr.open('POST', '/user/add', true);
      xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
      xhr.send(`u_names=${n}&u_phone=${p}&u_member=${m}`);
    }
  </script>
</body>

</html>